<template>
  <div class="container">
    <span class="text-left" v-text="textLeft"></span>
    <div class="expand"></div>
    <input class="edit-right"  v-model="inputText" :placeholder="textHint"/>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'cell-edit',

    data() {
      return {
        inputText: this.textDefault
      };
    },
    props: {
      textLeft: {
        type: String,
        required: true,
        default: 'text-left-required!!!'
      },
      textDefault: {
        type: String,
        default: null
      },
      textHint: {
        type: String,
        default: null
      }
    },
    watch: {
      inputText() {
        this.$emit('getText', this.inputText);
      }
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl";
  .container
    display flex
    justify-content flex-end
    align-items center
    background white
    height vw(45)
    line-height vw(45)
    margin-top vw(5)
    border-radius vw(5)
  .text-left
    margin-left vw(10)
    font-size word14

  .expand
    flex 1

  .edit-right
    text-align right
    margin-right vw(10)
    height cell-height
    line-height cell-height
    font-size word14

  ::-webkit-input-placeholder
    word-vw(12px, third-ash)
  :-moz-placeholder
    word-vw(12px, third-ash)

  ::-moz-placeholder
    word-vw(12px, third-ash)

  :-ms-input-placeholder
    word-vw(12px, third-ash)

</style>
